import React,{PureComponent} from 'react'
import {View,StyleSheet,TouchableOpacity,Text,Dimensions,Image,Button,Platform,FlatList} from 'react-native'
import {SpaceView} from '../Separator'
import ImagePlaceholder from '../ImagePlaceholder'
import CornerLabel from 'react-native-smart-corner-label'

import SelectRebateCountDown from '../select/SelectRebateCountDown'
const {width} = Dimensions.get('window')


type Props = {
    detail:Object,
    callBackheight:Function,
}

export default class DetailHeaderView extends PureComponent<Props>{



    layout=(e)=>{  console.log(e)
        // this.setState({text_height:e.layout.height})
        this.props.callBackheight(e.layout.height)
    }

    render(){
        let detail = this.props.detail
        let master_teacher = detail.teacher[0]
        let tutor_teacher = detail.teacher[1]
        let start_time = detail.start_date.substr(5, 5).replace('-', '月') + '日'
        let end_time = detail.end_date.substr(5, 5).replace('-', '月') + '日'
        
        var subject = ''

        if (detail.subject == 'math'){
            subject = '数'
        } else if(detail.subject == 'chinese'){
            subject = '语'
        }else if(detail.subject == 'english'){
            subject = '英'
        }



        return (
            <View style={[styles.container,{overflow: 'hidden', marginBottom:20}]} onLayout={({nativeEvent:e})=>this.layout(e)}>
                {this.renderZhe()}
                <View style={{flexDirection:'row',backgroundColor:'white',marginTop:15,width:width-60}}>
                    <View style={{backgroundColor:'#db3843',borderRadius:2,padding:3,}}>
                        <Text style={{color:'#FFFFFF',fontWeight:'bold',fontSize:11,}}>{subject}</Text>
                    </View>
                    <View style={{backgroundColor:'white',borderRadius:2,padding:2,marginLeft:6,borderColor:'#DB3843',borderWidth:1,marginRight:4}}>
                        <Text style={{color:'#DB3843',fontSize:11,}}>{detail.tag}</Text>
                    </View>
                    <Text numberOfLines={1} style={styles.title}>{detail.title}</Text>
                </View>
                <View style={{flexDirection:'row',backgroundColor:'white',marginTop:12,alignItems:'center',}}>
                    <Image style={{width:12,height:12}} source={require('../../../res/img/select/select_time.png')}/>
                    <Text style={[styles.time,{marginLeft:7}]}>{start_time+'到'+end_time}</Text>
                    <View style={{width:1,height:11, backgroundColor:'rgba(0,0,0,0.2)', marginLeft:10, marginRight:10}}/>
                    <Text style={{color:'#999999',fontSize:12,fontWeight:'200'}}>{detail.lessons.length}课时</Text>
                </View>
                <View style={{flexDirection:'row',backgroundColor:'white',marginTop:15,alignItems:'center',marginBottom:15}}>
                    <View style={{flexDirection:'row',alignItems:'center',}}>
                        <Image style={{width:28,height:28,borderRadius:14}} source={{uri:master_teacher.image}}/>
                        <View style={{marginLeft:10,justifyContent:'center',height:28}}>
                            <Text style={styles.teacher_show}>讲师</Text>
                            <Text style={styles.teacher}>{master_teacher.name}</Text>
                        </View>
                    </View>
                    <View style={{flexDirection:'row',alignItems:'center',marginLeft:30}}>
                        <Image style={{width:28,height:28,borderRadius:14}} source={{uri:tutor_teacher.image}}/>
                        <View style={{marginLeft:10,justifyContent:'center',height:28}}>
                            <Text style={styles.teacher_show}>辅导</Text>
                            <Text style={styles.teacher}>{tutor_teacher.name}</Text>
                        </View>
                    </View>
                </View>
                <FlatList
                    data={detail.discounts}
                    renderItem={this._renderItem}
                    keyExtractor={this._keyExtractor}
                    ItemSeparatorComponent={()=><View style={{width:width,height:6}}/>}
                />
            </View>
        )
    }

    renderZhe(){
        let info = this.props.detail
        if (info.discounts.length > 0){
            var item = info.discounts[0]
            var discount_start = new Date(item.start_at.replace(/-/g,"/")).getTime()
            var current_time = new Date().getTime()
            var discount_end = new Date(item.end_at.replace(/-/g,"/")).getTime()
            var discount = item.discount*10 + '折'
        }
        if (info.discounts.length > 0 &&  (current_time > discount_start > 0) && (current_time < discount_end)){
            return <CornerLabel
                alignment={'right'}
                cornerRadius={36}
                style={{backgroundColor: '#DB3843',}}
                textStyle={{fontSize: 12, color: 'white',marginTop:8}}>
                {discount}
            </CornerLabel>
        }else {
        return <View/>
        }
    }

    _renderItem = ({item})=>{
        var discount_start = new Date(item.start_at.replace(/-/g,"/")).getTime()
        var current_time = new Date().getTime()
        var discount_end = new Date(item.end_at.replace(/-/g,"/")).getTime()
        var discount = item.discount*10
        if ((current_time > discount_start > 0) && (current_time < discount_end)){
            return <View style={{flexDirection:'row',alignItems:'center',paddingRight:12}}>
                <View style={{backgroundColor:'#F7F7F7',padding:5,marginLeft:12,}}>
                    <Text style={{color:'#DB3843',fontSize:11}}>{item.start_at.substr(0,10)}至{item.end_at.substr(5,5)} {discount} 折</Text>
                </View>
                <View style={{flex:1}}/>
                <SelectRebateCountDown
                    // date={new Date()}
                    date={item.end_at}
                    daysStyle={styles.reabte_text}
                    hoursStyle={styles.reabte_text}
                    minsStyle={styles.reabte_text}
                    secsStyle={styles.reabte_text}
                    // firstColonStyle={styles.colon}
                    // secondColonStyle={styles.colon}
                />
            </View>
        } else {
            return <View style={{flexDirection:'row',alignItems:'center',paddingLeft:5}}>
                <Text style={{marginLeft:12,color:'#777777',fontSize:11}}>{item.start_at.substr(0,10)}至{item.end_at.substr(5,5)} {discount} 折</Text>
            </View>
        }
    }

    _keyExtractor = (item, index) => index + 'header';



}
const styles = StyleSheet.create({
    reabte_text:{
        color:'#db3843',
        fontSize: 12,
        borderColor:'#db3843',
        borderWidth:1,
        marginRight:5,
        marginLeft:5,
    },
    container: {
        backgroundColor: 'white',
        flex: 1,
        paddingLeft: 12,
    },
    title: {
        fontWeight: 'bold',
        color: 'rgba(0,0,0,0.8)',
        fontSize: 16,
        width: (width - 100),
    },
    time: {
        fontSize: 12,
        color: 'rgba(0,0,0,0.5)',
        fontWeight: '200',
    },
    teacher: {
        marginTop: 4,
        fontSize: 9,
        color: 'rgba(0,0,0,0.4)',
    },
    teacher_show: {
        fontSize: 9,
        color: 'rgba(0,0,0,0.8)',

    },

    ming_e: {
        fontSize: 12,
        color: 'rgba(0,0,0,0.7)',
        fontWeight: '200',
    },
    ming_e_show: {
        fontSize: 14,
        color: '#db3843',
        fontWeight: 'bold',
    },
    price: {
        color: 'rgba(197, 50, 60, 1)',
        fontSize: 19,
        fontWeight: '700',
        marginLeft: 6,
    }

})